<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 就是这句 屏蔽掉referrer就可以了 -->
    <meta name="referrer" content="no-referrer" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传测试</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
      h2 {
        color: #333;
      }
      form {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }
      input[type="file"] {
        display: block;
        margin-bottom: 10px;
      }
      button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      button:hover {
        background-color: #45a049;
      }
      .image-result {
        margin: 15px 0;
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 5px;
      }
      .image-container {
        margin: 10px 0;
      }
      input[type="text"] {
        width: 100%;
        padding: 8px;
        margin: 5px 0;
        box-sizing: border-box;
      }
      progress {
        width: 100%;
        height: 20px;
      }
    </style>
  </head>
  <body>
    <h2>上传图片到 Gitee</h2>
    <form id="uploadForm" enctype="multipart/form-data">
      <input type="file" name="images" accept="image/*" multiple required />
      <button type="submit">上传</button>
    </form>
    <div id="result"></div>
    <script>
      const form = document.getElementById("uploadForm");
      const result = document.getElementById("result");
      form.onsubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData(form);
        const fileInput = form.querySelector('input[type="file"]');
        const files = fileInput.files;
        
        // 检查是否选择了文件
        if (files.length === 0) {
          result.innerHTML = "<p style='color:red;'>请选择至少一个图片文件</p>";
          return;
        }
        
        // 检查文件类型
        for (let i = 0; i < files.length; i++) {
          if (!files[i].type.startsWith('image/')) {
            result.innerHTML = `<p style='color:red;'>文件 "${files[i].name}" 不是图片格式</p>`;
            return;
          }
        }
        
        result.innerHTML = "<p>上传中，请稍候...</p><progress></progress>";
        
        try {
          console.log("开始上传文件...");
          const resp = await fetch("/upload", {
            method: "POST",
            body: formData,
          });
          
          console.log("服务器响应状态:", resp.status);
          
          // 检查响应状态
          if (!resp.ok) {
            const errorText = await resp.text();
            console.error("上传失败:", errorText);
            try {
              const errorData = JSON.parse(errorText);
              result.innerHTML = `<p style='color:red;'>上传失败：${errorData.error || "服务器错误"}</p>
                                 <details>
                                   <summary>详细错误信息</summary>
                                   <pre>${JSON.stringify(errorData, null, 2)}</pre>
                                 </details>`;
            } catch (e) {
              result.innerHTML = `<p style='color:red;'>上传失败：${errorText || resp.statusText}</p>`;
            }
            return;
          }
          
          const data = await resp.json();
          console.log("上传响应数据:", data);
          
          if (data.urls && Array.isArray(data.urls)) {
            let html = "<h3>上传成功：</h3>";
            data.urls.forEach((item) => {
              console.log("图片URL:", item.url);
              html += `
                <div class="image-result">
                  <p><a href="${item.url}" target="_blank">${item.name}</a></p>
                  <div class="image-container">
                    <img src="${item.url}" alt="${item.name}" style="max-width:300px;">
                  </div>
                  <input type="text" value="${item.url}" readonly onclick="this.select()">
                </div>
              `;
            });
            result.innerHTML = html;
          } else {
            result.innerHTML = `<p style='color:red;'>上传失败：${
              data.error || "服务器返回了意外的响应格式"
            }</p>`;
          }
        } catch (err) {
          console.error("请求出错:", err);
          result.innerHTML = `<p style='color:red;'>请求出错: ${err.message || "未知错误"}</p>`;
        }
      };
    </script>
  </body>
</html>
